import React, {Component} from 'react';
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import './App.css';

class App extends Component {

    //状态在哪里，操作状态的方法就在哪里

    //初始化状态
    state = {
        todos: [
            {
                id: "001",
                name: "吃饭",
                done: true
            },
            {
                id: "002",
                name: "睡觉",
                done: true
            },
            {
                id: "003",
                name: "敲代码",
                done: false
            },
        ]
    }

    //用于添加一个todo，接收的参数是TODO对象
    addTodo =(todoObj)=>{
        //获取源todos
        const {todos} = this.state
        //追加一个todo
        const newTodos = [todoObj,...todos]
        //更新状态
        this.setState({todos: newTodos})
    }

    //changeTodo用于更新一个todo对象
    changeTodo=(id,done)=>{
        //获取源todos
        const {todos} = this.state
        //匹配处理数据
        const newTodos = todos.map((todoObj)=>{
            if (todoObj.id===id)return{...todoObj,done}
            else return todoObj
        })
        //更新状态
        this.setState({todos: newTodos})
    }

    //deleteTodo删除一个todo
    deleteTodo=(id)=>{
        //获取源todos
        const {todos} = this.state
        //删除指定id的todo对象
        const newTodos = todos.filter((todoObj)=>{
            return todoObj.id!==id
        })
        //更新状态
        this.setState({todos: newTodos})
    }

    //checkAllTodo用于全选
    checkAllTodo=(done)=>{
        //获取源todos
        const {todos} = this.state
        //加工数据
        const newTodos =  todos.map((todoObj)=>{return {...todoObj,done}})
        //更新状态
        this.setState({todos: newTodos})
    }

    //清除所有已完成的
    clearDone=()=>{
        //获取源todos
        const {todos} = this.state
        //筛选数据
        const newTodos = todos.filter((todoObj)=>{
            return !todoObj.done
        })
        //更新状态
        this.setState({todos: newTodos})
    }

    render() {
        const {todos} = this.state;
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo}/>
                    <List todos={todos} changeTodo={this.changeTodo} deleteTodo={this.deleteTodo}/>
                    <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearDone={this.clearDone} />
                </div>
            </div>
        );
    }
}

export default App;
